<template>
  <div class="train-detail-wrapper hp100 flex-column">
    <ChatRoom
        class="chat-wrapper"
        v-if="classInfo && classInfo.id && currentPlan.type === 0 && showChat && isOwn"
        :classId="classInfo.id"
        :teacherName="classInfo.teacherName"
        :teacherId="classInfo.teacherId"
      >
    </ChatRoom>
    <Icon class="voice-wrapper" v-if="showVoice && voiceUrl && isOwn" @click="turnToVoiceSites" type="ios-mic-outline" size="30" title="语音互动" style="margin-right:10px;"/>
    <template v-if="plan.list && plan.list.length">
      <div class="steps-wrapper" :class="!showNavBtn ? 'smallPadding' : ''">
        <div class="plans-scroll-wrapper hp100">
          <ul
            class="plans-wrapper"
            :style="{
              'padding-left': isDefault(firstPlan) ? '60px' : '20px',
              'padding-right': isDefault(endPlan) ? '60px' : '20px',
            }"
          >
            <li
              v-for="(plan, index) in plan.list"
              :key="plan.classNumberId"
              class="plans-item"
              :class="getClass(plan)"
            >
              <div class="plans-item-content">
                <div class="plan-type">{{ getType(plan) }}</div>
                <div class="plan-icon" @click="intoPlan(plan)">
                  <Icon
                    type="ios-checkmark"
                    :size="20"
                    v-if="plan.cnStatus === 2"
                  />
                  <span v-else>{{ index + 1 }}</span>
                  <!-- v-if="plan.cnStatus === 0" -->
                </div>
                <div class="plan-status">
                  <template v-if="!isDefault(plan) || plan.cnStatus === 2">{{
                    filterStatus(plan.cnStatus, "text")
                  }}</template>
                  <template v-else>
                    <span class="plan-countdown"
                      >{{
                        plan.cnStatus === 0 ? "开始" : "结束"
                      }}倒计时：<span>{{ time.h }}</span
                      >:<span>{{ time.m }}</span
                      >:<span>{{ time.s }}</span></span
                    >
                    <Poptip
                      confirm
                      transfer
                      :title="`确认${
                        plan.cnStatus === 1 ? '结束' : '开始'
                      }吗？`"
                      @on-ok="changeClassNumberStatus(plan, plan.cnStatus + 1)"
                    >
                      <Button
                        type="primary"
                        class="plan-status-button"
                        :disabled="setReBtnStatus()"
                        ><template v-if="plan.cnStatus === 1">立即结束</template
                        ><template v-else>立即开始</template></Button
                      >
                    </Poptip>
                  </template>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="plan-nav" v-show="showNavBtn">
          <div
            class="pre btn"
            :class="disPrevBtn ? 'not-allowed' : 'pointer'"
            @click="handleClick('left')"
          ></div>
          <div
            class="next btn"
            :class="disNextBtn ? 'not-allowed' : 'pointer'"
            @click="handleClick('right')"
          ></div>
        </div>
      </div>
      <div class="plans-content-wrapper flex-column">
        <div class="flex-between">
          <div class="plans-tab" v-if="currentPlan">
            <TabList
              :data="tabList"
              :current="curTab"
              @on-click="changeTab"
            ></TabList>
            <!-- <Button
                        v-for="tab in tabList"
                        v-show="tab.show"
                        :key="tab.name"
                        ghost
                        :class="{ active: curTab === tab.name }"
                        class="tab-item"
                        @click="changeTab(tab.name)"
                        >{{ tab.title }}</Button
                    > -->
          </div>
          <Button
            v-if="curTab === 'report'"
            type="primary"
            :disabled="disDownloadAllReport"
            @click="downloadClassReporter"
            >导出报告</Button
          >
          <!-- icon="ios-cloud-download-outline" -->
          <Button
            v-if="currentPlan.egType === 'exam' && examDetail.isQuestion == 1"
            :disabled="examDetail.isSendScore === 1 || examDetail.status !== 3"
            type="primary"
            @click="publishScore"
            >发布成绩</Button
          >
        </div>
        <div class="plans-detail" v-if="curTab">
          <span
            >{{ currentPlan.egType === "exp" ? "课件" : "考试" }}名称：{{
              currentPlan.name
            }} </span
          ><span v-if="currentPlan.egType === 'exp'"
            >课件类型：{{ handleExperType(this.experDetail.expType) }}
          </span>
          <span
            v-if="currentPlan.egType === 'exam' && examDetail.paperScore"
            class="green"
            >总分：{{ examDetail.paperScore }}</span
          >
          <span
            v-if="
              (currentPlan.egType === 'exam' && examScore.avgTotalScore) ||
              examScore.avgTotalScore === 0
            "
            class="green"
            >平均分：{{ Math.max(examScore.avgTotalScore, 0) }}</span
          >
          <span
            >时间：{{ showTimeNotSecond(currentPlan.startTime) }} ~ {{ showTimeNotSecond(currentPlan.endTime) }}</span
          >
        </div>
        <!-- <div class="plans-statistics" v-if="curTab"> -->
          <component
            v-if="curTab"
            class="plans-statistics"
            v-bind:is="getCurrentComponent(curTab)"
            :classNumberId="currentPlan.classNumberId"
            :exId="currentPlan.exId"
            :classNumberInfo="currentPlan"
            :classId="classId"
            :classStatus="classInfo.egStatus"
            :classType="currentPlan.classType"
            :type="getType(currentPlan)"
            :ecId="currentPlan.exId"
            :ecName="experDetail.ecname"
            :status="currentPlan.cnStatus"
            :disbledAllBtn="setReBtnStatus()"
            :examDetail="examDetail"
            @getExamDetail="getExamDetail"
            @setExamInfo="getAveScore"
            @disDownload="getDisStatus"
          >
          </component>
        <!-- </div> -->
      </div>
    </template>
    <div class="plans-content-wrapper flex-column" style="margin-top: 0" v-else>
      <NoData :noDataText="'暂无教学内容'"></NoData>
    </div>
    
  </div>
</template>
<script>
import encryption from '@/libs/encryption.js';
import { mapMutations, mapState } from 'vuex';
import timer from '@/mixin/timer';
import typeMixin from './mixins/typeMixin';
import {
    queryClassInfo,
    queryTeachSchedule,
    changeClassNumberStatus,
    queryExamAnalysisList
} from '@/api/selfStudy/class_new.js';
import { experimentDetail } from '@/api/selfStudy/courseExp.js';
import { downloadClassReporter } from '@/api/download';
import { getGroupInfo, addGroup, updateGroup } from '@/api/boardcast_new.js';
import { savePaper, queryExamDetail } from '@/api/exam.js';
import EnvironManagement from './environManagement-pt';
import AnswerRecord from './statistics/answerRecord.vue';
import VideoLearnStatictics from './statistics/videoLearnStatictics.vue';
import ReportScore from './statistics/reportScore.vue';
import GuideSectionLearn from './statistics/guideSectionLearn.vue';
import GuideQuestionAnswer from './statistics/guideQuestionAnswer.vue';
import ExamQuestionAnswer from './statistics/examQuestionAnswer.vue';
import ExamScore from './statistics/examScore.vue';
import QuestionScore from './statistics/questionScore.vue';
import RecordingList from './recordingList'
import ChatRoom from '@/components/chatRoom/classChatRoom.vue';
import TabList from '@/components/common/tab-list';
import {
    diffMixin,
    typeAndDirectionMixin,
    imagePathDealMixin,
    deployStatusMixin,
    experTypeMixin,
    visibleMixin
} from '@/mixin/study';
import {
    getDictInfoByName
} from '@/api/dict.js'
import { downloadBlob, showTimeNotSecond } from '@/libs/utils';
import TemplateDetailModal from "../../research/template/detail.vue";
export default {
    name: 'TrainDetail',
    components: {
      TemplateDetailModal,
        EnvironManagement,
        AnswerRecord,
        VideoLearnStatictics,
        ReportScore,
        GuideSectionLearn,
        GuideQuestionAnswer,
        ExamQuestionAnswer,
        ExamScore,
        QuestionScore,
        ChatRoom,
        TabList,
        RecordingList
    },
    mixins: [typeMixin, timer, experTypeMixin],
    data() {
        return {
            showTimeNotSecond,
            showVoice:0,
            voiceUrl:'',
            showChat:0,
            USER_ID: '',
            name: '培训详情',
            classId: this.$route.params.id,
            classInfo: {},
            classUserList: [],
            plan: {
                list: [],
                total: []
            },
            curTab: '',
            notAllowDeploy: false,
            currentPlan: {}, //当前的
            experDetail: { ecid: '' },
            examDetail: { id: '' },
            examScore: {},
            showNavBtn: false,
            disPrevBtn: true,
            disNextBtn: false,
            disDownloadAllReport: false,
            allowChat: false,
            hasChatGroup: false,
            screenRecording: 0,
        };
    },
    computed: {
      ...mapState('style', {
            trainNavLeftImg: (state) => {
                return state.themeConfig.trainNavLeftImg;
            },
            trainNavRightImg: (state) => {
                return state.themeConfig.trainNavRightImg;
            }
        }),
        defaultPlan() {
            return this.plan.list.find((item) => item.cnStatus !== 2) || this.endPlan;
        },
        firstPlan() {
            return this.plan.list[0];
        },
        endPlan() {
            return this.plan.list[this.plan.list.length - 1];
      },
      pageTitle () {
        //当前菜单显示名
        return this.$route.meta.title;
      },
        tabList() {
            return [
                {
                    label: '环境信息',
                    name: 'environ',
                    show:
                        this.currentPlan.egType === 'exp' &&
                        this.experDetail &&
                        this.experDetail.expType === 0
                },
                {
                    label: '指导书段落学习统计',
                    name: 'guideSection',
                    show:
                        this.currentPlan.egType === 'exp' &&
                        this.experDetail &&
                        this.experDetail.guide
                            ? true
                            : false
                },
                {
                    label: '指导书题目答题记录',
                    name: 'guideQuestion',
                    show:
                        this.currentPlan.egType === 'exp' &&
                        this.experDetail &&
                        this.experDetail.guide
                            ? true
                            : false
                },
                {
                    label: '随堂练习答题统计',
                    name: 'question',
                    show: this.currentPlan.egType === 'exp'
                },
                {
                    label: '视频学习统计',
                    name: 'video',
                    show:
                        this.currentPlan.egType === 'exp' &&
                        this.experDetail &&
                        this.experDetail.expType !== 2
                },
                {
                    label: '报告评级',
                    name: 'report',
                    show: this.currentPlan.egType === 'exp'
                },
                {
                    label: '录屏列表',
                    name: 'recordingView',
                    show: this.currentPlan.egType === 'exp' && this.screenRecording==1&&
                    this.experDetail &&
                        this.experDetail.expType === 0
                },
                {
                    label: '答题解析',
                    name: 'examQuestion',
                    show: this.currentPlan.egType === 'exam'
                },
                {
                    label: '评分',
                    name: 'questionScore',
                    show:
                        this.currentPlan.egType === 'exam' &&
                        this.examDetail &&
                        this.examDetail.isQuestion == 1
                },
                {
                    label: '成绩分析',
                    name: 'examScore',
                    show: this.currentPlan.egType === 'exam'
                },
                {
                    label: '屏幕录制查看',
                    name: 'recordingView',
                    show: this.currentPlan.egType === 'exp' && false
                },
            ];
        },
        isOwn(){
            return this.classInfo.teacherId == this.USER_ID
        },
    },
    watch: {
        defaultPlan: {
            handler(val, oldVal) {
                if (
                    (val &&
                        oldVal &&
                        (val.classNumberId !== oldVal.classNumberId ||
                            val.cnStatus !== oldVal.cnStatus)) ||
                    (val && !oldVal)
                ) {
                    this.intoPlan(val, true);
                }
            },
            deep: true
        },
        tabList(val, oldVal) {
            let tabChange = JSON.stringify(val) !== JSON.stringify(oldVal);
            if (tabChange) {
                this.initTab();
            }
        }
    },
    mounted() {
        // 获取用户id
        let October = sessionStorage.getItem('November');
        October = JSON.parse(encryption.SelfUseDecrypt(October));
        this.USER_ID = October.userId;
        this.queryTeachSchedule();
        this.getClassInfo();
        this.getDictscreenRecording();
        this.getDictInfoByName(); 
    },
    methods: {
        ...mapMutations(['addBreadItem']),
        getDictscreenRecording () {
            let params = {
                name: 'screenRecording'
            }
            getDictInfoByName(params).then(res => {
                console.log(res);
                if (res.code == 1) {
                    this.screenRecording = res.attribute.data.value
                }
                else {
                    this.screenRecording = 0
                    this.$Message.warning('查询屏幕录制配置失败')
                };
            })
        },
        getDrillDetail() {
            //timer 轮询
            this.queryTeachSchedule();
        },
        initTab() {
            if (this.currentPlan) {
                if (this.currentPlan.egType === 'exam') {
                    let tab = this.tabList.find(
                        (tab) =>
                            tab.show &&
                            ['examScore', 'examQuestion', 'questionScore'].includes(tab.name)
                    );
                    tab && this.currentPlan && this.changeTab(tab.name);
                } else {
                    if (this.experDetail.ecid) {
                        let tab = this.tabList.find(
                            (tab) =>
                                tab.show &&
                                !['examScore', 'examQuestion', 'questionScore'].includes(tab.name)
                        );
                        tab && this.currentPlan && this.changeTab(tab.name);
                    }
                }
            }
        },
        changeTab(name) {
            this.curTab = name;
        },
        intoPlan(plan, needServiceTime) {
            // if (plan.cnStatus === 0 && !this.isDefault(plan)) {
            //     this.$Message.info('课节未开始');
            //     return;
            // }
            // if (plan.cnStatus !== 0 || this.isDefault(plan)) {
            this.currentPlan = plan;
            // }
            if (plan.egType === 'exp' && plan.exId !== this.experDetail.ecid) {
                this.getExpInfo(plan.exId);
            }
            if (plan.egType === 'exam' && plan.exId !== this.examDetail.id) {
                this.getExamDetail(plan.exId, 'init');
            }
            if (needServiceTime) {
                let time =
                    plan.cnStatus === 0
                        ? new Date(plan.startTime).getTime()
                        : new Date(plan.endTime).getTime();
                this.getServeTime(time);
            }
        },
        getExamDetail(id, type) {
            queryExamDetail(id).then((data) => {
                if (data.code === 1) {
                    this.examDetail = data.attribute.data;
                    if (type === 'init') {
                        this.initTab();
                    }
                }
            });
            let query = {
                pageIndex: 1,
                pageSize: 10,
                classNumberId: this.currentPlan.classNumberId
            };
            queryExamAnalysisList(query).then(({ code, attribute: data, message }) => {
                if (code == 1) {
                    this.getAveScore(data.base);
                }
            });
        },
        getAveScore(scoreInfo) {
            this.examScore = scoreInfo;
        },
        getClassInfo() {
            return new Promise((resolve, reject) => {
                queryClassInfo(this.classId)
                    .then(({ code, data, message }) => {
                        if (code === 1) {
                            this.classUserList = data.trainUserList;
                            this.classInfo = data;
                            this.addGroup(this.classInfo, this.classUserList);
                        } else {
                            this.$Message.error(message);
                        }
                        resolve();
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            });
        },
        getChatGroupInfo() {
            return new Promise((resolve, reject) => {
                getGroupInfo(this.$route.params.id)
                    .then((res) => {
                        if (res.code && res.data.data) {
                            this.hasChatGroup = true;
                        } else {
                            this.hasChatGroup = false;
                        }
                        resolve(this.hasChatGroup);
                    })
                    .catch((error) => {
                        this.hasChatGroup = true;
                        resolve(this.hasChatGroup);
                    });
            });
        },
        //创建聊天组
        async addGroup(group, userList, op) {
            let hasChatGroup = await this.getChatGroupInfo();
            let groupUsers = userList.map((user) => {
                return {
                    avatar: '',
                    userId: user.userId,
                    userName: user.userName
                };
            });
            groupUsers.push({
                avatar: '',
                userId: group.teacherId,
                userName: group.teacherName
            });
            let params = {
                avatar: '',
                id: group.id,
                name: group.egName,
                groupUsers: groupUsers
            };
            if (!hasChatGroup) {
                addGroup(params)
                    .then((data) => {
                        if (data.code == 1) {
                            // if (needShowTip) {
                            //     this.$Message.info('聊天组创建成功');
                            //     groupInfo.hasChatGroup = true;
                            // }
                        } else {
                            this.$Message.error(data.message);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            } else {
                // updateGroup(params).then((data) => {
                //     if (data.code == 1) {
                //     } else {
                //         this.$Message.error(data.message);
                //     }
                // });
            }
        },
        queryTeachSchedule() {
            return new Promise((resolve, reject) => {
                let params = {
                    pageIndex: 1,
                    pageSize: 10000,
                    egId: this.classId
                };
                queryTeachSchedule(params)
                    .then(({ code, attribute: data, message }) => {
                        if (code === 1) {
                            let list = data.dataList;
                            list.sort(
                                (a, b) =>{
                                    let startTimeDiff =  new Date(a.startTime).getTime() - new Date(b.startTime).getTime()
                                    if (startTimeDiff !== 0) {
                                      // 如果 startTime 不同，则根据 startTime 排序
                                      return startTimeDiff;
                                    } else {
                                      // 如果 startTime 相同，则根据 endTime 排序
                                      return new Date(a.endTime).getTime() - new Date(b.endTime).getTime();
                                    }
                                });
                            let waitArr = list.filter((item) => item.cnStatus === 0);
                            let processArr = list.filter((item) => item.cnStatus === 1);
                            let endArr = list.filter((item) => item.cnStatus === 2);
                            this.plan.list = [...endArr, ...processArr, ...waitArr];
                            this.plan.total = data.totalCount;
                            this.classInfo = data.train;
                            this.addBreadItem({ name: this.classInfo.egName });
                            this.$nextTick(() => {
                                this.setBtnShow();
                            });
                            resolve();
                        } else {
                            this.$Message.error(message);
                        }
                    })
                    .catch((error) => {});
            });
        },
        getExpInfo(ecId) {
            let params = {
                eid: ecId
            };
            experimentDetail(params)
                .then((data) => {
                    if (data.code === 1) {
                        let getData = data.data;
                        this.experDetail = getData || {};
                        this.initTab();
                    } else {
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        changeClassNumberStatus(plan, status) {
            changeClassNumberStatus(plan.classNumberId, status).then(({ code, data, messge }) => {
                if (code === 1) {
                    if (status === 1) {
                        this.$Message.info('开始成功');
                    } else {
                        this.$Message.info('结束成功');
                        if (plan.egType === 'exam' && plan.exId === this.endPlan.exId) {
                            //一下更新一下考试状态
                            this.getExamDetail(plan.exId);
                        }
                    }
                    this.queryTeachSchedule();
                } else {
                    if (status === 1) {
                        this.$Message.error('开始失败');
                    } else {
                        this.$Message.error('结束失败');
                    }
                }
            });
        },
        getCurrentComponent(tab) {
            switch (tab) {
                case 'environ':
                    return 'EnvironManagement';
                    break;
                case 'guideSection':
                    return 'GuideSectionLearn';
                    break;
                case 'guideQuestion':
                    return 'GuideQuestionAnswer';
                    break;
                case 'question':
                    return 'AnswerRecord';
                    break;
                case 'video':
                    return 'VideoLearnStatictics';
                    break;
                case 'report':
                    return 'ReportScore';
                    break;
                case 'examQuestion':
                    return 'ExamQuestionAnswer';
                    break;
                case 'examScore':
                    return 'ExamScore';
                    break;
                case 'questionScore':
                    return 'QuestionScore';
                    break;
                case 'recordingView':
                    return 'RecordingList';
                    break;
                default:
                    return '';
            }
        },
        getClass(plan) {
            let status = plan.cnStatus;
            if (status === 0) {
                return `steps-item-wait ${this.isCurrent(plan) ? 'current' : ''} ${
                    this.isDefault(plan) ? 'default' : ''
                }`;
            } else if (status === 1) {
                return `steps-item-process ${this.isCurrent(plan) ? 'current' : ''} ${
                    this.isDefault(plan) ? 'default' : ''
                }`;
            } else if (status === 2) {
                return `steps-item-finish ${this.isCurrent(plan) ? 'current' : ''} ${
                    this.isDefault(plan) ? 'default' : ''
                }`;
            }
        },
        getType(plan) {
            if (plan.egType === 'exam') {
                return '考试';
            } else if (plan.type === 1) {
                return '作业';
            } else if (plan.classType === 'teaching') {
                return '教学';
            } else if (plan.classType === 'prelection') {
                return '讲课';
            }
        },
        setReBtnStatus() {
            let userid = this.classInfo.teacherId;
            if (userid === this.USER_ID) {
                //|| this.isRootDesinger
                return false;
            } else {
                return true;
            }
        },
        setBtnShow() {
            let plansScrollWrapper = document.querySelector('.plans-scroll-wrapper');
            let plansWrapper = document.querySelector('.plans-wrapper');
            if (!plansWrapper) {
                return;
            }
            let scrollWidth = plansWrapper.offsetWidth;
            let width = plansScrollWrapper.offsetWidth;
            if (width > scrollWidth) {
                this.showNavBtn = false;
            } else {
                this.showNavBtn = true;
            }
            //监控元素变化
            if (this.elementResizeDetectorMaker) {
                return;
            }
            this.elementResizeDetectorMaker = require('element-resize-detector');
            let erd = this.elementResizeDetectorMaker();
            let that = this;
            erd.listenTo(plansScrollWrapper, function(element) {
                that.$nextTick(function() {
                    this.setBtnShow();
                });
            });
        },
        handleClick(direction) {
            if (!this.curScoll) {
                this.curScoll = 0;
            }
            let plansScrollWrapper = document.querySelector('.plans-scroll-wrapper');
            let plansWrapper = document.querySelector('.plans-wrapper');
            let scrollWidth = plansWrapper.offsetWidth;
            let width = plansScrollWrapper.offsetWidth;
            let maxScroll = scrollWidth - width;
            if (direction === 'right') {
                this.curScoll = Math.min((this.curScoll += width), maxScroll);
            } else {
                this.curScoll = Math.max((this.curScoll -= width), 0);
            }

            if (this.curScoll === 0) {
                this.disPrevBtn = true;
                this.disNextBtn = false;
            } else if (this.curScoll == maxScroll) {
                this.disPrevBtn = false;
                this.disNextBtn = true;
            } else {
                this.disPrevBtn = false;
                this.disNextBtn = false;
            }
            plansWrapper.style.transform = `translate(-${this.curScoll}px)`;
        },
        isCurrent(plan) {
            return (
                plan && this.currentPlan && plan.classNumberId === this.currentPlan.classNumberId
            );
        },
        isDefault(plan) {
            return (
                plan && this.defaultPlan && plan.classNumberId === this.defaultPlan.classNumberId
            );
        },
        //导出客观题
        downloadClassReporter() {
            if (this.disDownloadAllReport) {
                return;
            }
            downloadClassReporter(this.currentPlan.classNumberId)
                .then((res) => {
                    let filename = `${this.currentPlan.name}-报告.zip`,
                        blob = new Blob([res.data]);
                    downloadBlob(filename, blob);
                })
                .catch((error) => {
                    console.log(error);
                    this.$Message.error('导出报告失败!');
                });
        },
        getDisStatus(status) {
            this.disDownloadAllReport = status;
        },
        //发布考试成绩
        publishScore(exam) {
            let _this = this;
            savePaper(this.currentPlan.exId).then((data) => {
                if (data.code === 1) {
                    _this.$Message.info('发布成绩成功!');
                    this.getExamDetail(this.currentPlan.exId);
                } else {
                    _this.$Message.error(data.message);
                }
            });
      },
      returnClass () {
        this.$router.push({
          name: 'class',
        })
      },
      getDictInfoByName() {
        getDictInfoByName({
            name: 'allowCommunicate'
        }).then(data => {
            if(data.code == 1) {
                this.showChat = data.attribute.data.value;
            } else {

            }
        })
        getDictInfoByName({
            name: 'allowVoice'
        }).then(data => {
            if(data.code == 1) {
                this.showVoice = Number(data.attribute.data.value);
                if(this.showVoice){
                    getDictInfoByName({
                        name: 'voiceUrl'
                    }).then(data => {
                        if(data.code == 1) {
                            this.voiceUrl = data.attribute.data.value;
                        } else {

                        }
                    })
                }
            } else {

            }
        })
      },
       turnToVoiceSites(){
            window.openTrain(`${this.voiceUrl}${this.classId}`);
        }
    }
};
</script>
<style scoped>
.train-detail-wrapper {
  position: relative;
}
.steps-wrapper {
  position: relative;
  height: 200px;
  padding: 30px 60px;
  color: var(--default-color);
  font-size: 14px;
  background: var(--card-body-bgcolor);
  border-radius: 8px;
  overflow: hidden;
  flex: none;
}
.steps-wrapper.smallPadding {
  padding: 30px 20px;
  transition: padding 0.1s;
}
.plans-scroll-wrapper {
  overflow: hidden;
  scrollbar-width: none;
}
.plans-wrapper {
  display: inline-flex;
  padding: 0 20px;
  transition: transform 1s;
}
.plans-item:not(:last-child) {
  margin-right: 160px;
}
.plans-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.plan-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 20px 5px 10px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--step-color);
  color:var(--step-color)
}
.plan-icon span{
  color:inherit;
}
.plans-item:not(:last-child) .plan-icon:after {
  position: absolute;
  left: 24px;
  content: "";
  width: 160px;
  height: 2px;
  background: var(--step-color);
}
.plans-item:not(:last-child).steps-item-finish .plan-icon:after {
  background: var(--step-active-color);
  border-color: var(--step-active-color);
}

.steps-item-wait.current .plan-icon {
  /* background:  var(--train-step-current-bgcolor);;
  color: var(--train-step-current-color); */
  /* border-style: double;
  border-width: 4px; */
  background: var(--step-color);
  border-color: var(--step-color);
  color: var(--card-body-bgcolor);

}
.steps-item-process.current .plan-icon,
.steps-item-finish.current .plan-icon{
  background: var(--step-active-color);
  color: #fff;
}
/* .steps-item-wait.default .plan-icon, */
.steps-item-process .plan-icon,
.steps-item-finish .plan-icon{
  background: var(--card-body-bgcolor);
  border-color:var(--step-active-color);
  color: var(--step-active-color);
  font-weight: bold;
}
.steps-item-finish .plan-icon{
  font-weight: bold;
}
.steps-item-process .plan-icon:before{
    box-shadow: 0 0 2px 4px var(--step-active-color);
    content:'';
    position: absolute;
    width: 150%;
    height: 150%;
    background: transparent;
    border:none;
    border-radius: 50%;
    transform:scale(0.7);
    animation: ani-spin-bounce 1s ease-in-out 0s infinite;
}
@keyframes ani-spin-bounce {
    /* from { box-shadow: 0px 0px 0px 0px var(--step-active-color);}
    to  { box-shadow: 0px 0px 10px 2px var(--step-active-color);} */
    from {  transform:scale(0.7) }
    to  { transform:scale(1);opacity: 0;} 
}
.steps-item-wait:not(.default).current .plan-icon span {
  /* color: var(--train-step-current-color); */
}
.plan-status {
  position: absolute;
  top: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  color: var(--default-color-level2);
}
.plan-countdown {
  margin-bottom: 10px;
}
.plan-status-button{
  border-color: var(--table-tr-hover-color);
  background: var(--table-tr-hover-color);
  color: var(--url-color);
  width: 96px;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
}
.plan-status-button:hover,
.plan-status-button:visited {
  /* color: #fff; */
  border-color: var(--table-tr-hover-color);
  background: var(--table-tr-hover-color);
  color: var(--default-color);
  box-shadow: none;
  outline: none;
}
/* 左右按钮 */
.plan-nav .btn {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  /* background-color: #307ced; */
  /* background: var(--step-color); */
  background: var(--step-color);
  opacity: .6;
  background-position: center;
  background-repeat: no-repeat;
}
.plan-nav .next {
  right: 0;
  /* background-image: url("../../../assets/globalIcon/next.png"); */
}
.plan-nav .next:after,
.plan-nav .pre:after{
    content:'';
    width:0;
    height:0;
    border:14px solid transparent;
    border-left-width: 10px;
    border-right-width: 10px;
}
.plan-nav .next:after{
    margin-left:10px;
    border-left-color: var(--card-body-bgcolor);
}
.plan-nav .pre {
  left: 0;
  /* background-image: url("../../../assets/globalIcon/prev.png"); */
}
.plan-nav .pre:after{
    margin-right:10px;
    border-right-color: var(--card-body-bgcolor);
}
/* nav */
.tab-item {
  margin-right: 10px;
  border: none !important;
  background: none !important;
  /* outline: 1px solid var(--table-color) !important;
  color: var(--table-color) !important; */
  border-radius: 4px !important;
}
.tab-item.active,
.tab-item.ivu-btn-default:not([disabled]):hover {
  border: none !important;
  outline: 2px solid #307ced !important;
  border: none !important;
  background: none !important;
  color: #307ced !important;
  font-weight: bold;
}
/* plans-content-wrapper */
.plans-content-wrapper {
  margin-top: 20px;
  padding: 20px 20px 10px 20px;
  /* min-height: calc(100vh - 295px); */
  border-radius: 10px;
  background: var(--card-body-bgcolor);
  flex: auto;
}
.plans-detail {
  margin: 20px 0;
  font-weight: bold;
}
.plans-detail span {
  margin-right: 20px;
}
.plans-statistics {
  flex: auto;
}
.green {
  color: #28c09e;
}
.chat-wrapper {
    position: absolute;
    right: 0px;
    top: -50px;
}
.voice-wrapper {
    position: absolute;
    right: 20px;
    top: -50px;
}
.hp100 {
  height: 100%;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
